<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>点击</button>
<p>abc</p>
<hr>
<div class="inner"></div>
<div class="create"></div>

<script>

    // 三种创建元素的方式
    // 总结: 不同浏览器下, innerHTML效率要比createElement高

    // window.onload 整个页面加载完了, 再会调用JS
    // window.onload = function () {
    //     document.write('<div>123</div>');
    // }

    // 1.document.write()   创建元素. 如果页面文档流加载完毕, 在调用这行代码会导致页面重绘
    //
    var btn = document.querySelector('button');
    // btn.onclick = function () {
    //     document.write('<div>123</div>');
    // }

    // 2.innerHTML  创建元素
    // innerHTML 是将内容写入某个 DOM 节点, 不会导致页面全部重绘
    // innerHTML 创建多个元素效率更高 (前提是不要拼接字符串, 采取数组形式拼接), 结构稍微复杂
    var inner = document.querySelector('.inner');
    for (let i = 0; i < 100; i++) {
        inner.innerHTML += '<a href="#">百度</a>'

    }

    // 3.document.creatElement  创建元素
    // createElement()创建多个元素效率稍低一点点, 但是结构更清晰
    var create = document.querySelector('.create');
    for (let i = 0; i < 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a)
    }

</script>
</body>
</html>
